<template>
<div class="public_form_container">
    <template v-if="enabled">
        <div class="public_form_body" v-if="couldFill">
            <div class="form_header">{{title}}</div>
            <div class="form_body">
                <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef" class="cgs-vformRender"></v-form-render>
                <div style="width: 100px; margin: 0 auto;">
                    <a-button style="width: 100px" @click="submit" type="primary">提交</a-button>
                </div>
            </div>
        </div>
        <div class="public_form_added" v-if="!couldFill">
            <div style="font-size: 22px">已填报。</div>
        </div>
    </template>
    <template v-if="!enabled">
        <div style="font-size: 22px">
            404
        </div>
    </template>
</div>
</template>

<script>
import {getWorksheetPublicDetail, savePublicRow} from '@/api/worksheet'
export default {
    data(){
        return {
            worksheetInfo: {},
            worksheetId: '',
            title: '',
            couldFill: false,
            enabled: true,
            
            formJson: {},
            formData: {},
            optionData: {},
        }
    },
    methods:{
        async submit(){
            let data = await getWorksheetPublicDetail({shareId: this.shareId})
            const { couldFill, enabled, extParam} = data
            let formData = await this.$refs.vFormRef.getFormData();
            // 判断是否有扩展参数，有的话填入文本
            if(window.location.search){
                for(const item in extParam.extUrls){
                    if(extParam.extUrls[item].url == decodeURI(window.location.href, "utf-8")){
                        formData[extParam.extField] = extParam.extUrls[item].param
                    }
                }
            }
            let result = await savePublicRow({worksheetId: this.worksheetId, data: formData})
            if(result){
                this.$message.success('提交成功！');
                this.couldFill = couldFill
                this.enabled = enabled
                this.$refs.vFormRef.resetForm()
            } else {
                this.$message.warn('提交失败！');
            }
        },
    },
    async mounted(){
        let data = await getWorksheetPublicDetail({shareId: this.shareId})
        const {worksheetId, worksheetInfo, couldFill, title, enabled, extParam} = data
        this.worksheetInfo = worksheetInfo
        this.worksheetId = worksheetId
        this.couldFill = couldFill
        this.enabled = enabled
        this.title = title
   
        this.$nextTick(() => {
            let config = JSON.parse(worksheetInfo.config);
            if(window.location.search){
                for(const item in config.widgetList){
                    if(config.widgetList[item].id == extParam.extField){
                        config.widgetList.splice(item, 1)
                    }
                }
            }
            this.$refs.vFormRef.setFormJson(config)
        })
    },
    computed:{
        shareId() {
            return this.$route.params.shareId;
        },
    },
}
</script>

<style lang="less">
.public_form_container{
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
    overflow-y: auto;

    @media screen and (max-width: 600px) {
        .public_form_body{
            width: 300px;
            margin: 20px auto 10px;
            border-radius: 3px;
            background-color: #fff;
            box-shadow: 0 1px 4px rgb(0 0 0 / 16%);

            .form_header{
                padding: 5px 10px 10px;
                border-bottom: 1px solid rgb(0 0 0 / 16%);
                color: #333;
                font-size: 36px;
                font-weight: 500;
            }
            .form_body{
                padding: 10px 20px;
            }
        }
    }

    @media screen and (min-width: 1000px) {
        .public_form_body{
            width: 800px;
            margin: 50px auto 20px;
            border-radius: 3px;
            background-color: #fff;
            box-shadow: 0 1px 4px rgb(0 0 0 / 16%);

            .form_header{
                padding: 10px 20px 20px;
                border-bottom: 1px solid rgb(0 0 0 / 16%);
                color: #333;
                font-size: 36px;
                font-weight: 500;
            }
            .form_body{
                padding: 20px 50px;
            }
        }
    }

    .public_form_added{

    }
}
</style>